<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div>
                    {{ username }}
                    <el-avatar :size="50" :src="avator" />
                    <el-dropdown placement="bottom-start">
                        <el-button> bottomStart </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>The Action 1st</el-dropdown-item>
                                <el-dropdown-item>The Action 2nd</el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button plain @click="open">退出</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">

                </el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/request/request'
import router from '@/router'
let username=localStorage.getItem('username')
let avator=localStorage.getItem('avator')
const open = () => {
  ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
      request.post('/quit').then((res)=>{
        if(res.data.code==10000){
            router.push('/login')
            localStorage.clear()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

</script>

<style lang="scss" scoped></style>